<template>
  <div v-loading="loading" class="Fxpg_details" element-loading-background="rgba(0, 0, 0, 0.4)">
      <el-tabs class="risktab" v-model="activeName" @tab-click="handletabClick">
        <el-tab-pane label="入户调查" name="first">
          <div class="Fxpg_cur listTables">
            <!-- <div class="RightCardTitle">基本情况 </div> -->
            <el-table
                :data="riskList.dangerGridList"
                style="width: 100%;padding-bottom: 20px;"
                class="tableFXPg"
            >
                <el-table-column align="center" prop="hOfHouse" label="户主" />
                <el-table-column align="center" prop="familfPNum" label="家庭人口" />
                <el-table-column align="center" prop="he" label="宅基高程(m)" />
                <el-table-column align="center" prop="area" label="房屋面积(m²)" />
            </el-table>
            </div>
              <div class="Submerge">
                <div><span>{{ riskList.dangerArea || 0 }}</span>危险区面积<br/>(m²)</div>
                <div><span>{{ riskList.risk || 0 }}</span>风险点</div>
                <div><span>{{ riskList.dangerHNum || 0 }}</span>危险区户数<br/>(户)</div>
                <div><span>{{ riskList.dangerPNum || 0 }}</span>危险区人口<br/>(人)</div>
                </div>
        </el-tab-pane>
        <el-tab-pane label="风险隐患" name="second">
        <div class="listTables fxtable"> 
            <el-table
            :data="fxtableList"
            class="fxtablecont">
            <el-table-column align="center" prop="hOfHouse" label="户主" />
            <el-table-column align="center" prop="familfPNum" label="家庭人口" />
            <el-table-column align="center" prop="he" label="宅基高程(m)" />
            <el-table-column align="center" prop="area" label="房屋面积(m²)" />
        </el-table>
        </div>

        </el-tab-pane>
    
    </el-tabs>
   
   
  </div>
</template>
<script>
import { GetDangerGrid } from '../../../api/xuna.js'
export default {
    data() {
        return {
            riskList: {},
            loading: false,
            organFdobj:{},
            activeName:'first',
            fxtableList:[],
            
        }
    },
    mounted() {

    },
    beforeDestroy() {
        this.$eventBus.$off('organFd')
    },
    created() {
       
    },
    mounted(){
       this.$eventBus.$on('organFd', res => {
           // console.log(res)
           this.organFdobj = res;
            this.organFdplanId = res.id
            if (res.num === 0) {
                this.getGetDangerGrid()
            }
        })
    },
    methods: {
        getGetDangerGrid() {
            this.loading = true;
            // planId: this.organFdplanId
            let pams = {
                 'addvcd':this.organFdobj.addvcd?this.organFdobj.addvcd:'',
                // 'planId': this.organFdplanId
            }
            GetDangerGrid(pams).then((res) => {
                this.loading = false
                this.riskList = res.data;
                this.riskList.dangerArea = Math.floor(this.riskList.dangerArea * 100) / 100;
                this.fxtableList = this.riskList.dangerGridList
            }).catch(err=>{

            })
        },
        handletabClick(){

        }
    }
}
</script>
<style lang="less" scoped>

.Fxpg_details {
  display: flex;
  flex-direction: column;
  height: 100%;
  .Fxpg_cur {
    //  height: 100%; 
     height: 82%; 
    flex-shrink: 0;
    background: rgba(3,34,55,0.39);
    overflow: auto;
    .tableFXPg{
     
     height:100%;
        /deep/.el-table__empty-text{
          font-size: 16px;
          font-weight: bold;
          color: #fff;
        }
    }
  }
}
.Submerge {
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  margin-top: 10px;
  > div {
    width: 25%;
    span {
		font-weight: bold;
    //font-size: 22px;
    font-size: 19px;
		display: block;
		width: 100%;
		height: 80px;
		line-height: 60px;
		text-shadow:  0px 0px 9px rgba(188,248,255,0.79);
		background: url("~@/assets/newimg/StatisticsBg.png") no-repeat top center;
    background-size: 90% 100%;
    overflow-wrap: break-word;
    }
  }
}
.risktab{
    height: 100%;
     /deep/.el-tabs__item{
         color:#fff;
    }
    /deep/.is-active{
        color:#fff;
    } 
    /deep/.el-tabs__nav-scroll{
        display: block;
        width:100%;
    }
    /deep/.el-tabs__content{
        padding-top:10px;
        height: calc(100% - 40px);
        .el-tab-pane{
            height:100%;
        }
       
    }
    /deep/.el-tabs__item{
        padding:0px;
        font-size:16px;
    }
     /deep/ .el-tabs__active-bar{
            display: block;
        }
   
}
.fxtable{
    height:100%;
    overflow:auto;
    .fxtablecont{
        height:100%;
        width: 100%;
        padding-bottom:20px;
    }
}

</style>
